<template>
	<!-- 加载中 -->
	<uni-load-more :status="loadingStatus" v-if="isLoading" />

	<!-- 已加载 -->
	<scroll-view v-else class="task-app-container" scroll-y enable-flex refresher-enabled="true"
		refresher-threshold="45" refresher-bg="#f9f9f9" refresher-color="#4CAF50" @refresherrefresh="onRefresh"
		:refresher-triggered="isRefresher">
		<!-- 滚动内容占位符，确保底部空间足够 -->
		<view class="scroll-content">
			<!-- 主要内容区域 -->
			<view class="task-content-container">
				<!-- 任务列表 -->
				<view class="task-list">
					<!-- 任务项包装器 -->
					<view v-for="(task, index) in tasks" :key="task.id" class="task-wrapper">
						<uni-swipe-action>
							<uni-swipe-action-item :right-options="getTaskOptions(task)"
								@click="handleSwipeActionClick($event, task.id)" class="task-item-action">
								<view class="task-item" :class="{ 'task-item-completed': task.status === 1 }">
									<view class="task-info">
										<!-- 任务图标 - 添加动态背景色 -->
										<view class="task-icon" :style="{ backgroundColor: getTaskIconColor(index) }">
											<text class="task-icon-text">{{ task.icon }}</text>
										</view>

										<!-- 任务详情 -->
										<view class="task-details">
											<!-- 标题和分数区域 -->
											<div class="task-main-info">
												<text class="task-title">{{ task.taskName }}</text>
												<text class="task-score">
													<uni-icons type="star" size="12" color="#FFD700" />
													{{ task.score }}分
												</text>
											</div>

											<!-- 任务标签 -->
											<view class="task-tags">
												<uni-tag :circle="true" :text="task.tags" type="primary" />
											</view>
										</view>
									</view>
								</view>
							</uni-swipe-action-item>
						</uni-swipe-action>
					</view>
				</view>

			</view>

			<!-- 任务表单组件 -->
			<task-form ref="taskForm" @task-added="onTaskAdded" />
		</view>
	</scroll-view>

	<!-- 浮动按钮，位置固定在右下角 -->
	<uni-fab @fabClick="handleAddTask" pattern="icon" horizontal="right" vertical="bottom" :pop-menu-list="[]"
		:show="true" icon="plus" background-color="#2196F3" />
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import uniTag from '@/uni_modules/uni-tag/components/uni-tag/uni-tag';
	import uniSwipeAction from '@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action';
	import uniSwipeActionItem from '@/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item';
	import uniFab from '@/uni_modules/uni-fab/components/uni-fab/uni-fab';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons';
	// 导入任务API
	import { completeTaskAPI, deleteTaskAPI, listTaskAPI } from '../../../services/task';
	import type { TaskItem } from '../../../types/task';
	// 导入任务表单组件
	import TaskForm from './form.vue';
	/**
	 * 加载状态
	 */
	const isLoading = ref(false);

	/**
	 * 加载状态文本
	 */
	const loadingStatus = ref('more');
	/**
	 * 任务列表数据
	 */
	const tasks = ref<TaskItem[]>([

	]);

	/**
	 * 刷新状态
	 */
	const isRefresher = ref(false);

	// 任务表单组件引用
	const taskForm = ref();


	/**
	 * 加载任务数据
	 * 包装实际的API调用，提供数据获取功能
	 */
	const loadTaskData = async () => {
		try {
			// 调用后端API获取任务数据
			const response = await listTaskAPI();
			// 转换数据格式以匹配组件需求
			tasks.value = response.data;
		} catch (error) {
			console.error('加载任务数据失败:', error);
			uni.showToast({
				title: '加载任务数据失败',
				icon: 'none'
			});
		}
	};

	/**
	 * 处理添加新任务 - 打开弹窗
	 */
	const handleAddTask = async () => {
		// 调用表单组件的打开弹窗方法
		taskForm.value.openPopup();
	};

	/**
	 * 任务添加成功后的处理函数
	 * 用于刷新任务列表
	 */
	const onTaskAdded = async () => {
		// 刷新任务列表
		await loadTaskData();
	};

	/**
	 * 处理完成任务
	 * @param taskId 任务ID
	 */
	const handleCompleteTask = async (taskId) => {
		try {
			// 在实际应用中，这里可以调用API标记任务为已完成
			await completeTaskAPI(taskId);

			// 刷新任务列表
			await loadTaskData();

			uni.showToast({
				title: '任务已完成',
				icon: 'success'
			});
		} catch (error) {
			uni.showToast({
				title: '完成任务失败',
				icon: 'none'
			});
		}
	};

	/**
	 * 根据任务标签获取图标背景色
	 * @param tags 任务标签
	 */
	const getTaskIconColor = (index : number) => {
		const colorMap : Record<number, string> = {
			1: '#FF9800',
			2: '#2196F3',
			3: '#9C27B0',
			4: '#4CAF50',
			5: '#607D8B'
		};
		return colorMap[index] || '#607D8B';
	};

	/**
	 * 根据任务状态获取滑动操作选项
	 * @param task 当前任务对象
	 */
	const getTaskOptions = (task : TaskItem) => {
		const options : Array<{ text : string; style : { backgroundColor : string } }> = [];

		// 如果任务未完成，添加完成按钮
		if (task.status === 0) {
			options.push({
				text: '完成',
				style: {
					backgroundColor: '#4CAF50',
				}
			});
		}

		// 添加删除按钮
		options.push({
			text: '删除',
			style: {
				backgroundColor: '#f44336',
			}
		});

		return options;
	};

	/**
	 * 处理滑动操作点击事件
	 * @param index 点击的选项索引
	 * @param taskId 任务ID
	 */
	const handleSwipeActionClick = async (item : {
		content : {
			text : string;
			style : {
				backgroundColor : string;
			};
		};
		index : number;
		position : string;
	}, taskId : number) => {

		console.log("index:", item, "taskId:", taskId)
		if (item.index == 0) {
			await handleCompleteTask(taskId);

		} else {
			await handleDeleteTask(taskId);
		}
	};

	/**
	 * 处理删除任务
	 * @param taskId 任务ID
	 */
	const handleDeleteTask = async (taskId : number) => {
		// 显示确认对话框
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这个任务吗？',
			async success(res) {
				if (res.confirm) {
					try {
						await deleteTaskAPI(taskId)
						await loadTaskData()
						uni.showToast({
							title: '任务已删除',
							icon: 'success'
						});
					} catch (error) {
						uni.showToast({
							title: '删除任务失败',
							icon: 'none'
						});
					}
				}
			}
		});
	};

	/**
	 * 组件挂载时加载任务数据
	 */
	onMounted(() => {
		// 开启加载状态
		isLoading.value = true;
		loadingStatus.value = 'loading';
		loadTaskData();
		setTimeout(() => {
			// 关闭加载状态
			isLoading.value = false;
			loadingStatus.value = 'more';
		}, 1000);
	});

	/**
	 * 下拉刷新处理函数
	 */
	const onRefresh = async () => {
		isRefresher.value = true;
		try {
			// 重新获取任务数据
			await loadTaskData();
		} finally {
			// 使用setTimeout确保有足够的刷新动画展示时间
			setTimeout(() => {
				isRefresher.value = false;
			}, 500);
		}
	};
</script>

<style lang="scss" scoped>
	// 提取通用样式变量
	$primary-color: #4CAF50; // 主色调
	$secondary-color: #2196F3; // 次要色调
	$background-color: #f9f9f9; // 背景色
	$card-background: #ffffff; // 卡片背景色
	$text-primary: #333333; // 主要文本颜色
	$text-secondary: #666666; // 次要文本颜色
	$border-color: #dddddd; // 边框颜色
	$tag-background: #e0e0e0; // 标签背景色
	$shadow: 0 2px 5px rgba(0, 0, 0, 0.1); // 阴影效果
	$border-radius-sm: 4px; // 小尺寸圆角
	$border-radius-md: 8px; // 中尺寸圆角
	$border-radius-lg: 10px; // 大尺寸圆角
	$border-radius-full: 50%; // 圆形圆角
	$transition-duration: 0.2s; // 过渡动画持续时间

	/**
	 * 任务应用主容器 - scroll-view样式
	 */
	.task-app-container {
		height: 100vh;
		background-color: $background-color;
	}

	/**
	 * 滚动内容容器
	 */
	.scroll-content {
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	/**
	 * 主要内容区域
	 */
	.task-content-container {
		padding: 20px;
		flex: 1;
	}

	/**
	 * 任务列表
	 */
	.task-list {
		display: flex;
		flex-direction: column;
		gap: 20px; // 保持任务项之间的间距
	}

	/**
 * 任务项包装器
 */
	.task-wrapper {
		display: flex;
		flex-direction: column;
		margin-bottom: 20px; // 确保任务项之间有足够的间距
		transition: transform $transition-duration ease, box-shadow $transition-duration ease;
	}

	/**
 * 任务项包装器悬停效果
 */
	.task-wrapper:hover {
		transform: translateY(-5px);
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	}

	/**
 * 任务项包装器点击效果
 */
	.task-wrapper:active {
		transform: translateY(-2px);
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}


	/**
 * 滑动操作组件
 */
	.uni-swipe-action {
		width: 100%;
	}

	/**
 * 滑动操作项
 */
	.task-item-action {
		border-radius: $border-radius-md;
		overflow: hidden;
	}




	/**
 * 任务项
 */
	.task-item {
		background: #f8f9fa;
		/* 浅白色背景 */
		border-radius: $border-radius-md;
		//阴影边框
		border: 1px solid $border-color;

		padding: 15px;
		box-shadow: $shadow;
		display: flex;
		align-items: center;
		justify-content: space-between;
		transition: all $transition-duration ease;
		width: 100%;
		box-sizing: border-box;
	}

	.task-item:not(.task-item-completed):hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.task-item-completed {
		border-left-color: #a3eb74;
	}

	/**
 * 已完成任务项样式
 */
	.task-item-completed {
		background-color: #a3eb74;
	}



	/**
	 * 任务信息部分
	 */
	.task-info {
		display: flex;
		align-items: center;
	}

	/**
	 * 任务图标
	 */
	.task-icon {
		width: 48px;
		height: 48px;
		border-radius: $border-radius-full;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15px;
		transition: transform $transition-duration ease;
	}

	.task-icon:hover {
		transform: scale(1.05);
	}

	.task-icon-text {
		color: white;
		font-size: 20px;
		font-weight: 500;
	}

	/**
	 * 任务详情部分
	 */
	.task-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	/**
	 * 任务标题
	 */
	.task-main-info {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.task-title {
		display: block;
		font-weight: 600;
		font-size: 16px;
		color: $text-primary;
		line-height: 1.4;
		flex: 1;
		margin-right: 10px;
	}

	/**
	 * 任务分数
	 */
	.task-score {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #ff6b35;
		font-weight: 500;
		gap: 3px;
		white-space: nowrap;
	}

	/**
	 * 任务标签容器
	 */
	.task-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	/**
	 * 任务标签
	 */
	.task-tag {
		background-color: $tag-background;
		padding: 2px 8px;
		border-radius: $border-radius-lg;
		font-size: 12px;
		margin-right: 5px;
		margin-bottom: 5px;
	}

	/**
	 * 任务操作按钮组
	 */
	.task-actions {
		display: flex;
		gap: 8px;
	}

	/**
	 * 操作按钮基础样式
	 */
	.task-action-button {
		padding: 6px 12px;
		border-radius: $border-radius-sm;
		border: none;
		font-size: 12px;
		transition: background-color $transition-duration;
	}

	/**
	 * 完成按钮样式
	 */
	.task-complete-button {
		background-color: $primary-color;
		color: white;
	}

	/**
	 * 完成按钮点击状态
	 */
	.task-complete-button:active {
		background-color: #45a049;
	}





	/**
	 * 弹窗样式
	 */
	.task-popup-content {
		width: 80%;
		max-width: 400px;
		background-color: $card-background;
		border-radius: $border-radius-lg;
		padding: 20px;
	}

	/**
	 * 弹窗头部
	 */
	.task-popup-header {
		text-align: center;
		margin-bottom: 20px;
	}

	/**
	 * 弹窗标题
	 */
	.task-popup-title {
		font-size: 18px;
		font-weight: bold;
		color: $text-primary;
	}

	/**
	 * 弹窗主体
	 */
	.task-popup-body {
		margin-bottom: 20px;
	}

	/**
	 * 表单项目
	 */
	.task-form-item {
		margin-bottom: 15px;
	}

	/**
	 * 表单标签
	 */
	.task-form-label {
		display: block;
		margin-bottom: 5px;
		font-size: 14px;
		color: $text-secondary;
	}

	/**
	 * 表单输入框
	 */
	.task-form-input {
		width: 100%;
		padding: 10px;
		border: 1px solid $border-color;
		border-radius: $border-radius-sm;
		box-sizing: border-box;
	}

	/**
	 * 图标选择器
	 */
	.task-icon-selector {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	/**
	 * 图标项
	 */
	.task-icon-item {
		width: 40px;
		height: 40px;
		background-color: $tag-background;
		border-radius: $border-radius-full;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		cursor: pointer;
	}

	/**
	 * 图标项激活状态
	 */
	.task-icon-item.active {
		border: 2px solid $primary-color;
	}

	/**
	 * 弹窗底部按钮组
	 */
	.task-popup-footer {
		display: flex;
		gap: 10px;
	}

	/**
	 * 取消按钮
	 */
	.task-cancel-button {
		flex: 1;
		background-color: $tag-background;
		color: $text-secondary;
		border: none;
		padding: 10px;
		border-radius: $border-radius-sm;
	}

	/**
	 * 确认按钮
	 */
	.task-confirm-button {
		flex: 1;
		background-color: $primary-color;
		color: white;
		border: none;
		padding: 10px;
		border-radius: $border-radius-sm;
	}
</style>